<template>
<view>
 <view v-if="showModal&&currentBox.lock.lock_status" style="position: fixed;top: 0;left: 0;width:100vw;height: 100vh;background: rgba(0, 0, 0, 0.9);z-index: 12000;">
	 <view style="display: flex;align-items: center;height: 100vh;justify-content: center;">
		 <view style="width: 400rpx;position: relative;">
			 <view :style="ststyle" class="mkjhhn">
				 <image :style="xiangstyle" mode="widthFix" style="width: 400rpx;position: absolute;transform:scale(0);transition:1s;" :src="xiang2"></image>
				 <image  mode="widthFix" style="width: 400rpx;position: absolute;" :src="xiang1"></image>
			 </view>
		 	<image mode="widthFix" style="width: 400rpx;margin-top:-30px;" :src="moshi"></image>
			<image :style="xiangstyle1" class="rotating-element" mode="widthFix" style="width: 80rpx;position: absolute;margin-top:-20px;transform:scale(0);transition:1s;" :src="xingxing"></image>
			<image :style="xiangstyle1" class="rotating-element" mode="widthFix" style="width: 80rpx;position: absolute;left:-30px;margin-top:-40px;transform:scale(0);transition:1s;" :src="xingxing"></image>
			<image :style="xiangstyle1" class="rotating-element" mode="widthFix" style="width: 40rpx;position: absolute;left:-10px;margin-top:0px;transform:scale(0);transition:1s;" :src="xingxing"></image>
		 </view>
</view>
 
 </view>
 
  <view class="portraint-main">
    <view class="main-container" :class="modMaskOpen ? 'blur-main' : ''">
      <!-- 头部 -->
      <nav-bar :title="details.ysf_name" v-if="graduallyShow.top"></nav-bar>
      <!-- 主体 -->
      <view class="main-content">
        <view class="main-good">
          <good-main
            :details="details"
            v-if="graduallyShow.goodsMain"
            id="maingood"
          >
          </good-main>
        </view>

        <!-- 商品列表 -->
        <view class="goods-group">
			
			<view v-if="currentBox.lock.lock_status" style="position: absolute;margin-top:-240rpx;left:40rpx;">
				<view style="position: relative;">
					<image mode="widthFix" :src="suoxiang" style="width:190rpx;height:120rpx;"></image>
					<dowm @end="dowmend" :timestamp="currentBox.lock.secondsDiff" format="mm:ss"></dowm>
				</view>
			</view>
			
          <goods-group
            id="goodsgroup"
            :total="boxTotal"
            :height="groupHeight"
            :current-box="currentBox"
			:secondsDiff="secondsDiff"
            :probability="probabilitySwitch"
            @open="changeBoxListMod(true)"
            @change="switchBox"
            @look="lookDetailsMod"
            v-if="graduallyShow.goodsList"
          ></goods-group>
        </view>
        <!-- 抽奖按钮 -->
        <view class="lottery" v-if="graduallyShow.lotteryShow">
			<template v-if="currentBox.lock.lock_type == 'my'">
				<lottery-group
				   @lottery="onLottery"
				   :details="extractable"
				 ></lottery-group>
			</template>
			<template v-else>
				<lottery-group
				   @lottery="onLottery"
				   :details="extractable"
				 ></lottery-group>
			</template>
        
        </view>
        <!-- 额外按钮 -->
        <other-btn
          class="other-btn"
          @other-btn="onOtherBtn"
          v-if="graduallyShow.borderButtonDis"
        >
        </other-btn>
        <!-- 展开按钮 -->
        <unfold-btn :active-id="initiallyId" @unfold="onUnfold"></unfold-btn>
      </view>
    </view>
    <!-- 箱子列表 -->
    <box-list
      v-if="boxListModuleStauts"
      :initially-id="initiallyId"
      :current-box="currentBox"
      :total="boxTotal"
      :rows="boxRows"
      @change-box-list-mod="changeBoxListMod"
      @select="selectBox"
    ></box-list>
    <!-- 开奖记录 -->
    <lottery-history
      v-if="lotteryHistoryOpen"
      :initially-id="initiallyId"
      :box-id="currentBox.box_id"
      @change-history-mod="changeHistoryMod"
    ></lottery-history>
    <!--  开奖结果   -->
    <view :hidden="!lotteryResultOpen">
      <lottery-result
        :show="lotteryResultOpen"
        :animation-data="animationImg"
        :result-list="lotteryResultList"
        @again="onAgain"
		@tabsel="tabsel"
		@jishou="jishou"
        @close="onLotteryResultClose"
      ></lottery-result>
    </view>

    <!-- 规则 -->
    <rules
      :details="explain"
      v-if="explainOpen"
      @change-rules-mod="changeRulesMod"
    ></rules>
    <!-- 分享 -->
    <shopro-share v-model="showShare" posterType="user"></shopro-share>

    <shopro-pay-model
      :history="payHistory"
      @change-pay-mod="changePayMod"
      @result="onDrawResults"
      @payed="onPayed"
      v-if="showTrade"
      activity-type="yfs"
      :protocol="initiallyId"
      :details="payDetails"
    ></shopro-pay-model>
    <!-- 款式详情 -->
    <shopro-commodity-details
      :product-id="productId"
      @change-details-mod="changeDetailsMod"
      v-if="productDetails"
    ></shopro-commodity-details>
    <!-- 登录提示 -->
    <shopro-auth-modal></shopro-auth-modal>
	
	<!-- <u-popup
	  v-model="showModal"
	  @close="vfclose"
	  :border-radius="20"
	  mode="center"
	  length="auto"
	  :closeable="false"
	>
	<view style="transition:2s;">
		<image mode="widthFix" style="width: 400rpx;" :src="suoxiangm"></image>
	</view>
	</u-popup> -->
	
	
	
  </view>
  </view>
  
</template>
<script>
/**
 * 一番赏抽取界面
 *
 * 1.详情按钮，文字式按钮，可点击，点击后弹出规则说明下拉分页

   2.分享按钮，文字式按钮，可点击，点击后调取微信分享API

   3.直播模式按钮，文字式按钮，可点击，点击后界面更改为直播模式界面

   4.商品展示区域有两个角标，分别展示商品当前数量/预设数量以及商品的对应赏类别（类别标签需要区分等级），用户可点击商品展示区域的商品进入对应商品的详情分页（通用界面）；在商品展示区域，用户可上下滑动查看所有的商品，也可以左右滑动切换箱盒，左滑为切换上一个箱盒，右滑为切换下一个箱盒

    5.音效按钮，图标加文字复合式按钮，可点击，点击后改变音效播放状态（开/关），不同状态对应不同的按钮展示

    6.中奖记录按钮，图标加文字复合式按钮，可点击，点击后打开一番赏中奖记录分页

    7.盒柜按钮，图标加文字复合式按钮，可点击，点击后跳转至盒柜界面

    8.换箱按钮，文字式按钮，可点击，点击后打开箱盒选取界面

    9.上一箱/下一箱切换按钮，文字式按钮，可点击，点击后切换至上/下一箱盒

    10.抽取按钮，文字式按钮，根据抽取发数进行区分，不同按钮的颜色不同，所展示的金额根据后台配置的按钮抽取发数和抽取单价计算后得到。用户点击后弹出支付分页

    11.抽取文本说明，文字信息，具体展示文本为“商品抽奖存在概率性，付费请谨慎，拆盒后（会在线拆盒）不支持退款”
 *
 *  1.一番赏内根据功能差异分为购买赏和赠送赏两大赏类，购买赏为玩家通过购买抽数直接抽取到的赏品，每一箱盒的抽取数等于当前箱盒内的购买赏的数量（总数等于购买赏总数量），赠送赏为达成特定条件时赠送给予玩家的赏品有特殊的规则设定。前端展示时区分需要两种赏
    2.一番赏内的购买赏根据等级差异区分为不同赏类（配置时需要批量勾选该箱内的购买赏），如S赏、A赏、B赏、C赏，每个赏类支持配置多个内部具体的商品（配置时需要批量勾选该购买赏内的商品）
    3.抽取时根据每个购买赏类配置的的各自权重进行一重抽取，抽取确定赏类别后根据每个赏内的商品的各自权重进行二重抽取，将二重抽取的结果作为用户抽取的最终结果。当某个赏类中的商品由于库存为0时，则将该商品的权重更改为0，只有该赏类下的所有商品权重变为0时，该赏类的权重才会变为0【例如有A赏权重为5，B赏权重为10，C赏权重为37，D赏权重为108，则A赏的实际抽取概率为5/(5+10+37+108)=1/32，若A赏内的所有商品被抽取完则剩余赏的概率变化为10/（10+37+108）=2/31】
    4.特殊规则中的禁出规则执行时，可将对应赏类或对应物品的权重修改为极低值（不为0），避免出现用户抽到空气的情况
 */
import dowm from '../components/dowm.vue';
import BoxList from '../components/box-list.vue';
import GoodsGroup from '../components/goods-group.vue';
import NavBar from '../components/navbar.vue';
import GoodMain from '../components/good-main.vue';
import OtherBtn from '../components/other-btn.vue';
import LotteryGroup from '../components/lottery-group.vue';
import UnfoldBtn from '../components/unfold-btn.vue';
import LotteryResult from '../components/lottery-result.vue';
import LotteryHistory from '../components/lottery-history.vue';
import Rules from '../components/rules.vue';

import { EXTRACTABLEE } from './portait_config';
import share from '@/shopro/share';
import { mapActions, mapMutations, mapGetters } from 'vuex';
import suoxiang from '../img/daojishi.png';
import xingxing from '../img/xingxing.png';
import xiang2 from '../img/xiang2.png';
import xiang1 from '../img/xiang1.png';
import moshi from '../img/suoxiang.png';



export default {
  // 建议 创建每个组件时 都添加name属性 标识组件名称
  // name: 'portraitMain',
  components: {
    BoxList,
    GoodsGroup,
	dowm,
    NavBar,
    GoodMain,
    OtherBtn,
    LotteryGroup,
    UnfoldBtn,
    LotteryResult,
    LotteryHistory,
    Rules,
  },
  data() {
    return {
		xiang2,
		xiang1,
		moshi,
		xiangstyle:{},
		ststyle:{},
		showModal:false,
		suoxiang,
		xingxing,
		secondsDiff:"",
      // 全局视图展示开关
      graduallyShow: {
        // 顶部展示
        top: false,
        // 商品列表展示
        goodsList: false,
        // 商品主体展示
        goodsMain: false,
        // 额外按钮展示
        borderButtonDis: false,
        // 抽奖按钮区展示
        lotteryShow: false,
      },

      groupHeight: {
        style: '700rpx',
        height: 350,
      },

      initiallyId: '',

      //当前查看商品id
      productId: '',

      //当前商品信息
      details: {},

      // 当前箱子
      currentBox: {
        // 箱子id
        box_id: 0,
        // 当前箱子位置
        index: 0,
        //箱子内 商品列表
        box_goods: {
          list: [],
          //商品总数
          total: 0,
        },
        // 商品库存
        box_num: {
          // 总库存
          total: 0,
          // 当前箱子内 剩余商品数量
          surplus: 0,
        },
        //箱子顺序
        box_sort: {
          // 当前总箱子数
          count: 0,
          // 当前箱子数
          sort: 0,
        },
        // 可抽取 按钮
        price: {
          single: '',
          five: '',
          ten: '',
          all: '',
        },
      },
      // 箱子数量
      boxTotal: 0,
      //箱子区间数
      boxRows: 4,
      /**
       * 箱子列表
       * [
       * [],
       * [],
       * [],
       * [],
       * ]
       *
       */
	  sel:[],
      boxList: [],
      //结果列表
    lotteryResultList: [],

      // 抽取方式
      extractable: EXTRACTABLEE,
      rollNum: '',
      //说明
      explain: '',
      // 动画加载
      animationImg: {
        start: {
          cdn:
            this.$IMG_URL +
            '/uploads/20230427/7a4cb0b6cd4b96accdf19ded4e0ddf40.gif',
          status: false,
          count: 0,
          url: '',
        },
        light: {
          cdn:
            this.$IMG_URL +
            '/uploads/20230427/807f1102f46064a246a130eb7562e316.png',
          status: false,
          count: 0,
          url: '',
        },
      },
      // 交易信息
      payDetails: {},
      payHistory: {
        type: '',
      },
      // 音效开启关闭
      soundOpen: true,
      // 中奖纪录显示隐藏
      winningRecordOpen: false,
      // 规则展示隐藏
      rulesOpen: false,
      // 支付展示
      paymentOpen: false,
      // 箱子列表弹窗显示
      boxListModuleStauts: false,
      // 抽奖 结果展示
      lotteryResultOpen: false,
      // 开奖纪录展示
      lotteryHistoryOpen: false,
      // 规则显示隐藏
      explainOpen: false,
      //分享 显示隐藏
      showShare: false,
      // 交易弹窗
      showTrade: false,
      // 查看款式详情
      productDetails: false,
    };
  },
  // 计算属性 适配者模式
  computed: {
    ...mapGetters(['allSkip']),
    // 概率显示隐藏
    probabilitySwitch() {
      let type = this.details?.probability_switch || '0';
      return type == '1' ? true : false;
    },
    // 遮罩打开
    modMaskOpen() {
      return this.boxListModuleStauts;
    },
  },
  // 数据监听
  watch: {},
  /**
   * 生命周期 类似 发布订阅者模式
   */
  //监听页面初始化，其参数同 onLoad 参数 触发时机早于 onLoad 百度小程序
  /** 监听页面加载
   * 其参数为上个页面传递的数据，
   * 参数类型为 Object（用于页面传参）
   */
  onLoad(e = {}) {
    let { title, id, box_id } = e;
    this.initiallyId = this.$Route.query?.id || id || '';
    this.currentBox.box_id = box_id || 0;
    this.globalGraduallyShow();
  },
  // 监听页面显示。页面每次出现在屏幕上都触发 包括从下级页面点返回露出当前页面
  onShow() {},
  // 监听页面初次渲染完成 注意如果渲染速度快，会在页面进入动画完成前触发
  onReady(e) {},
  // 监听页面隐藏
  onHide() {},
  // 监听页面卸载
  onUnload() {},
  // 在实例创建完成后被立即调用
  created: function () {},
  // 在挂载开始之前被调用
  beforeMount() {},
  // 挂载到实例上去之后调用。详见 注意：此处并不能确定子组件被全部挂载，如果需要子组件完全挂载之后在执行操作可以使用nextTick
  onResize: function (res) {
    // res.size.windowWidth // 新的显示区域宽度
    // res.size.windowHeight // 新的显示区域高度
    // uni.showModal({
    //   title: '窗口变化',
    //   content: `width: ${res.size.windowWidth}, ${res.size.windowHeight}`,
    //   showCancel: true,
    //   cancelText: '取消',
    //   cancelColor: '#000000',
    //   confirmText: '确定',
    //   confirmColor: '#3CC51F',
    //   success: (result) => {
    //     if (result.confirm) {
    //     }
    //   },
    //   fail: () => {},
    //   complete: () => {},
    // });
  },

  mounted() {
	   // this.lotteryResultOpen = true;
	  
	  
	  
  },

  methods: {
	  dowmend(){
		  this.currentBox.lock.lock_status = false
		  this.$forceUpdate()
	  },
    ...mapActions(['changeAllSkip']),
    ...mapMutations(['CartOnshow']),
	indexof(val) {
		for (var i = 0; i < this.sel.length; i++) {
			if (this.sel[i] == val) return i;
		}
		return -1;
	},
	remove(val) {
		var index = this.indexof(val);
		if (index > -1) {
			this.sel.splice(index, 1);
		}
	},
	tabsel(index,item){
		if(item.recycle==0){
			uni.showToast({
				title:"不支持兑换",
				icon:"none"
			})
			return	
		}
		console.log(item)
		this.lotteryResultList.map(itemb=>{
			if(itemb.box_id == item.box_id){
				if(item.isdisabled){
					itemb.isdisabled = false
				}else{
					itemb.isdisabled = true
				}
			}
		})
		
		if(item.isdisabled){
			this.remove(item.box_id)
		}else{
			this.sel.push(item.box_id)
		}
	},
	jishou(){
		  if (this.sel.length) {
		    this.$Router.push({
		      path: '/pages/hegui/fastJishou',
		      query: {
		        ids: this.sel,
		      },
		    });
		  } else {
		    uni.showToast({
		      title: '请选择商品',
		      duration: 2000,
		    });
		  }
	},
    //继续抽奖 继续欧气
    onAgain() {
      // this.lotteryResultOpen = false;
      // this.showTrade = true;
      this.getBoxTotal()
        .then(() => {
          return this.getBoxDetails({
            action: 'selected',
            box_id: this.currentBox.box_id,
          });
        })
        .then(() => {
          return this.getDetails();
        })
        .then(() => {
          this.onLottery({
            data: {
              id: this.rollNum,
            },
          });
        })
        .catch(() => {});
    },
    // 关闭 抽奖结果
    onLotteryResultClose() {
      this.lotteryResultOpen = false;
      this.getBoxTotal()
        .then(() => {
          return this.getBoxDetails({
            action: 'selected',
            box_id: this.currentBox.box_id,
          });
        })
        .then(() => {
          return this.getDetails();
        })
        .then(() => {})
        .catch(() => {});
    },

    // 对应的执行顺序请求数据
    orderOfExecution() {
      /***
       * 箱子请求操控
       * 初次进来
       * 1 获取 一番赏 信息
       * 2 获取箱子总数
       * 3 获取箱子列表
       * 4 获取当前箱子详情
       */

      return {
        top: null,
        lotteryShow: null,
        borderButtonDis: null,
        // 获取 商品列表
        goodsList: () => {
          const tim0 = new Date().getTime();
          return new Promise((resolve, reject) => {
            this.getBoxTotal()
              .then(() => {
                return this.getBoxDetails({
                  box_id: this.currentBox.box_id,
                });
              })
              .then(() => {
                const tim1 = new Date().getTime();
                resolve({ time: tim1 - tim0 });
              })
              .catch(() => {
                const tim1 = new Date().getTime();
                reject({ time: tim1 - tim0 });
              });
          });
        },
        // 商品主体
        goodsMain: () => {
          const tim0 = new Date().getTime();
          return new Promise((resolve, reject) => {
            this.getDetails()
              .then(() => {
                const tim1 = new Date().getTime();
                resolve({ time: tim1 - tim0 });
              })
              .catch(() => {
                const tim1 = new Date().getTime();
                reject({ time: tim1 - tim0 });
              });
          });
        },
      };
    },

    //监听右上角自定义按钮
    onOtherBtn(ev) {
      switch (ev.name) {
        case 'look':
          this.getRules().then(() => {
            this.explainOpen = true;
          });

          break;
        case 'share':
          share.setShareInfo({
            title: this.details.ysf_name,
            desc: '',
            image: this.details.cover_image,
            params: {
              page: 5,
              pageId: this.initiallyId,
            },
          });

          this.showShare = true;
          break;
        case 'live':
          this.$Router.push({
            path: '/pages/rewardGoods/loading',
            query: {
              from: 'yfs',
              to: 'live',
              id: this.initiallyId,
              box_id: this.currentBox.box_id,
            },
          });
          // this.$Router.replace({
          //   path: '/pages/rewardGoods/loading',
          //   query: {
          //     from: 'yfs',
          //     to: 'live',
          //     id: this.initiallyId,
          //     box_id: this.currentBox.box_id,
          //   },
          // });

          break;
        case 'up':
          let content = '';
          if (this.allSkip) {
            content = '是否需要开启抽奖动画';
          } else {
            content = '是否需要跳过抽奖动画';
          }
          uni.showModal({
            title: '抽奖动画',
            content,
            showCancel: true,
            cancelText: '取消',
            confirmText: '确定',
            success: (result) => {
              if (result.confirm) {
                this.changeAllSkip(!this.allSkip);
              }
            },
            fail: () => {},
            complete: () => {},
          });

          break;
      }
    },

    // 监听商品列表滑动事件
    onTocuhDirection() {},
    // 获取商品信息
    getDetails() {
      return new Promise((resolve, reject) => {
        this.$http(
          'v1.yfsinfo',
          {
            id: this.initiallyId,
          },
          '加载中...'
        ).then((res) => {
          if (res.code === 1) {
            this.details = res.data;
            share.setShareInfo({
              title: this.details.ysf_name,
              desc: '',
              image: this.details.cover_image,
              params: {
                page: 5,
                pageId: this.initiallyId,
              },
            });

            //获取 箱子总数
            resolve();
          } else {
            reject();
          }
        });
      });
    },

    // 获取 箱子总数
    getBoxTotal() {
      return new Promise((resolve, reject) => {
        this.$http('v1.yfsboxstotal', {
          id: this.initiallyId,
        }).then((res) => {
          if (res.code === 1) {
            this.boxTotal = res.data || 1;
            resolve();
          } else {
            reject();
          }
        });
      });
    },
    // 获取规则
    getRules() {
      return new Promise((resolve, reject) => {
        if (this.explain) {
          resolve();
          return;
        }
        this.$http(
          'v1.activitysDetails',
          {
            activity_id: this.initiallyId,
            type: 'yfs',
          },
          '加载中'
        ).then((res) => {
          if (res.code === 1) {
            this.explain = res.data.content;
            resolve();
          } else {
            reject();
          }
        });
      });
    },

    // 监听点击抽奖
    onLottery(ev) {
      let residual = this.currentBox?.box_num?.surplus;
      // let total  = this.currentBox?.box_num?.total
      if (residual == 0) {
        uni.showToast({
          title: '该箱已被抽空，去其他箱盒看看吧',
          icon: 'none',
          duration: 1500,
          mask: true,
        });
        return;
      }
      this.getBoxDetails({
        action: 'selected',
        box_id: this.currentBox.box_id,
      }).then((details) => {
        let num = this.currentBox?.box_num?.surplus;
        if (num && num > 0) {
          this.rollNum = ev.data.id;
          let params = {
            activity_type: 'yfs',
            activity_id: this.initiallyId,
            roll_num: this.rollNum,
            box_id: this.currentBox.box_id,
          };
          this.$http('v1.createOrder', params, '正在创建').then((res) => {
            if (res.code === 1) {
              this.payDetails = {
                ...res.data,
              };
              this.showTrade = true;
            }
          });
        } else {
          uni.showToast({
            title: '该箱已被抽空',
            icon: 'none',
            duration: 1500,
            mask: true,
          });
        }
      });
    },
    // 关闭 交易弹窗
    changePayMod(e) {
      this.rollNum = '';
      this.showTrade = e;
      this.payDetails = {};
    },

    /**
     * @description 获取箱子列表
     * @param {Object} ev
     */
    getBoxList(ev = {}) {
      let { status = 'init', page = 1, rows = 1 } = ev;
      // 初始化
      if (status === 'init') {
      }
      return new Promise((resolve, reject) => {
        this.$http('v1.yfsboxs', {
          id: this.initiallyId,
          page,
          rows,
        }).then((res) => {
          if (res.code === 1) {
            this.boxList = res.data;
            resolve(res.data);
          } else {
            reject();
          }
        });
      });
    },

    // 获取箱子详情
    getBoxDetails(ev = {}) {
      let { status = 'init', action = 'selected', box_id = '0' } = ev;
      return new Promise((resolve, reject) => {
        this.$http(
          'v1.yfsBoxsAction',
          {
            id: this.initiallyId,
            box_id,
            action,
          },
          '加载中'
        ).then((res) => {
          if (res.code === 1) {
			  if(res.data.lock.lock_status){
				  var past = new Date(res.data.lock.lock_time).getTime()
				  var now = new Date();
				  var secondsDiff = (past - now) / 1000;
				  console.log(secondsDiff,"locklock")
				  res.data.lock.secondsDiff = secondsDiff
			  }
			  
			  
            this.currentBox.index = res.data?.box_sort?.sort;
            this.currentBox = Object.assign(this.currentBox, res.data);
            Object.keys(this.currentBox.price).forEach((item) => {
              const ele = this.currentBox.price[item];
              this.$set(this.extractable[item], 'price', ele);
            });
            resolve();
          } else {
            reject();
          }
        });
      });
    },
    // 选择箱子
    selectBox(ev) {
      this.getBoxDetails({
        action: 'selected',
        box_id: ev.item.box_id,
      })
        .then(() => {})
        .catch(() => {});
    },

    //切换箱子
    switchBox(e) {
      const fn = () => {
        return e.success();
      };
      switch (e.direction) {
        case 'next':
          this.getBoxDetails({
            action: 'next',
            box_id: this.currentBox.box_id,
          })
            .then(fn)
            .catch(fn);
          break;
        case 'previous':
          this.getBoxDetails({
            action: 'last',
            box_id: this.currentBox.box_id,
          })
            .then(fn)
            .catch(fn);
          break;

        default:
          this.getBoxDetails({
            action: 'next',
            box_id: this.currentBox.box_id,
          })
            .then(fn)
            .catch(fn);
          break;
      }
    },

    // 显示隐藏 商品详情
    changeDetailsMod(ev) {
      this.productId = '';
      this.productDetails = ev;
    },
    // 查看 商品详情
    lookDetailsMod(ev) {
      this.productId = ev;
      this.productDetails = true;
    },

    // 结果
    onDrawResults(ev) {
		this.getBoxDetails({
		  action: 'selected',
		  box_id: this.currentBox.box_id,
		}).then(res=>{
			this.lotteryResultOpen = true;
			this.showTrade = false;
			this.lotteryResultList = ev;
			
			setTimeout(()=>{
					  
					  this.showModal = true
					  setTimeout(()=>{
					  		  this.ststyle = 'transform: translateY(-40px);'
					  		  
					  		  setTimeout(()=>{
					  			  this.ststyle = 'transform: translateY(0px);'
					  			  
					  			  
					  			  this.xiangstyle= 'transform:scale(1);'
					  			  
					  			  
					  			  this.xiangstyle1='transform:scale(1);'
					  			  
					  			  setTimeout(()=>{
									   this.showModal = false
								  },2000)
					  			  
					  		  },800)
					  },100)
			},5000)
		})
		
      
	  
	 
	  
    },
    // 支付后的结果
    onPayed(ev) {
      this.payHistory = { type: ev.type };
      let param = {
        id: this.initiallyId,
        order_sn: ev.result.data.order_sn,
        roll_num: this.rollNum,
        box_id: this.currentBox.box_id,
      };
      // 进行获取奖品
      this.$http('v1.yfsRoll', param, '请稍等').then((res) => {
        if (res.code === 1) {
			res.data.map(item=>{
				item.isdisabled=false
			})
          this.onDrawResults(res.data);
           this.CartOnshow(true);
        }
      });
    },

    // 箱子列表展示隐藏
    changeBoxListMod(e) {
      this.boxListModuleStauts = e;
    },
    // 开奖记录展示隐藏
    changeHistoryMod(e) {
      this.lotteryHistoryOpen = e;
    },
    // 规则显示隐藏
    changeRulesMod(e) {
      this.explainOpen = e;
    },

    // 轮播图
    changeSwiper(e) {},
    // 监听组件自定义事件
    onModEvent() {},

    // 渐序展示视图
    globalGraduallyShow() {
      // 执行列表
      const eventList = this.orderOfExecution();
      // 组件渲染延迟 函数
      const fn = (_ev = () => {}, delay = 400) => {
        return new Promise((resolve, reject) => {
          setTimeout(() => {
            _ev();
            resolve(true);
          }, delay);
        });
      };
      // 视图列表
      const views = Object.keys(this.graduallyShow);
      const len = views.length;

      return new Promise(async (resolve, reject) => {
        // 按顺序 依次执行
        for (let i = 0; i < len; i++) {
          const item = views[i];
          // 延迟800ms
          let t = 60;
          if (eventList[item]) {
            // 请求
            try {
              let result = await eventList[item]();
              // 请求异步 耗时 耗时大于60ms直接渲染 小于60ms异步差值 渲染
              t = result.time > 60 ? 0 : 60 - result.time;
            } catch (error) {
              t = error.time > 60 ? 0 : 60 - error.time;
            }
          }
          // 执行 延迟函数
          const timeout = await fn(() => {
            // 渲染
            this.$set(this.graduallyShow, item, true);
            // 获取商品主体高度
            if (item == 'goodsMain') {
              this.getGroupMain();
            }
            if (i == len - 1) {
              resolve();
            }
          }, t);
        }
      });
    },
    // 获取主商品区域范围
    getGroupMain() {
      setTimeout(() => {
        this.$nextTick(() => {
          const query = uni.createSelectorQuery().in(this);
          query
            .select('#maingood')
            .boundingClientRect((data) => {
              if (data.height) {
                this.groupHeight = {
                  style: `calc(100vh - ${data.height}px)`,
                  height: data.height,
                };
              }
            })
            .exec();
        });
      }, 400);
    },
    // 监听 扩展按钮 事件
    onUnfold(e) {
      switch (e.type) {
        //音效
        case 'noise':
          break;
        // 开奖记录
        case 'history':
          this.changeHistoryMod(e.status);
          break;
        // 盒柜
        case 'cabinet':
          break;
        // 刷新
        case 'refresh':
          uni.showLoading({
            title: '刷新中',
            mask: true,
          });
          this.globalGraduallyShow().then(() => {
            uni.hideLoading();
          });
          break;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.blur-main {
  filter: blur(10px);
}
.portraint-main {
  position: relative;
  width: 100%;
  min-height: 100vh;
  background-color: #fff;
  .main-content {
    width: 100%;
    min-height: 100%;
    .main-good {
      position: relative;
      width: 100%;
      min-height: 870rpx;
      background: rgba(10, 39, 53, 0.8);
      box-shadow: 0 0 100rpx 20rpx rgba(73, 137, 146, 0.8) inset;
      // &::after {
      //   position: relative;
      //   bottom: -80rpx;
      //   content: '喵~😽被发现了,你觉得这是彩蛋吗?';
      //   width: 100%;
      //   font-size: 14px;
      //   text-align: center;
      //   display: block;
      // }
    }
    .sw-view-item {
      width: 100%;
      height: 100%;
      // background: #ddd;
      .center {
        margin: 40rpx auto;
        width: 80%;
        height: 80%;
        text-align: center;
        background-color: #ddd;
      }
    }
  }
}

.goods-group {
  // position: relative;
  position: sticky;
  bottom: -180rpx;
  z-index: 2;
  width: 100%;
  min-height: 45vh;
  background: #fff;

  &::before {
    content: '';
    display: inline-block;
    position: absolute;
    top: -20rpx;
    width: 100%;
    height: 40rpx;
    border-radius: 20rpx 20rpx 0 0;
    background: #fff;
  }
}

.hide-loading-img {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  overflow: hidden;
  z-index: -1;
  .loading-img {
    width: 100%;
    height: 100%;
  }
}
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
 
.rotating-element {
  animation: rotate 2s linear infinite;
}
.mkjhhn{
	transform: translateY(61vh);transition:0.8s;height: 400rpx;
}
</style>
